<template>
  <div id="flex">
    <template v-for="(_, index) of columns">
      <SortableList v-model="columns[index]" :options="{ animation: 200, group: 'shared' }">
        <template #header="{ colIndex }">
          <h4>第 {{ colIndex + 1 }} 列</h4>
        </template>

        <template #default="{ item }">
          <div style="background:#e3f2fd; padding:8px; border-radius:4px; word-break: break-all; height: 300px; flex-shrink: 0;">
            {{ item.title }}
          </div>
        </template>
      </SortableList>
    </template>
  </div>
</template>

<script>
import SortableList from "./dragableWaterfall/draggableContainer.vue";

export default {
  components: { SortableList },
  data() {
    return {
      columns: [
        [],
        [
          {
            id: "1111111111111111111111111111111111133333333333333333333333333333",
            title:
              "11111111111111111111111111111111111333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333",
          },
          { id: 2, title: 2 },
          {
            id: 3,
            title:
              "3333333333333333333333333333333333333333333333333333333333333333",
          }
        ],
        [
          { id: 4, title: "4" },
          { id: 5, title: 5 },
          { id: 6, title: 6 }
        ],
        [
          { id: 7, title: 7 },
          { id: 8, title: 8 },
          { id: 9, title: 9 }
        ],
      ]
    };
  },
  watch: {
    columns() {
      console.log(this.columns);
    }
  }
};
</script>

<style>
#flex {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#flex>div {
  margin: 10px;
  padding: 20px;
  background-color: azure;

  flex-grow: 1;
  flex-basis: 400px;
}


</style>
